<template>
	<view class="flex1 flex_c" style="position: relative;;height: 100%;width: 100%;">

		<view class="flex_r fj_b fa_c custom-page-title">
			<view class=""></view>
			<view class="text_34 bold_ c-primary">
				结伴旅游
			</view>
			<view class="c-primary" @tap="to('/pages/m-pages/m-agree-form/index')">发布</view>
		</view> 
		<scroll-view class="flex1 custom-page" scroll-y @scrolltolower="scrolltolower" refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">

			<view style="height: 100rpx;"></view>

			<view class="item" v-for="(item,index) in list" @tap="goDetail(item)">
				<view class="flex_r fa_c avatar" style="background-color: none;" @tap="goUser(item.userId)">
					<view class="avatar-img">
						<image class="img" :src="item.userImg" mode="aspectFill"></image>
					</view>
					<view class="c-fff">
						{{item.userName}}
					</view>
				</view>
				<view class="text_34 bold_ item-title c-primary">
					{{item.destination}}
				</view>
				<view class="flex_r row">
					<view class="flex1 text_24 row-text">
						<view class="c-999">
							{{item.tag}}
						</view>
						<view class="c-999">
							行程时间：{{item.reachTime}}
						</view>
						<view class="c-999">
							出发时间：{{item.setOutTime}}
						</view>
						<view class="c-999">
							出行方式：{{item.travel}}
						</view>
					</view>
					
				</view>
				<view class="row-img mt-12 w-full">
					<image clss="img" mode="widthFix" class="radius-8" :src="item.userImg"></image>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	export default {
		data() {
			return {
				pageno: 1,
				list: [],
				refresherTriggered: false
			}
		},
		created() {
			this.getList()
		},
		onShow() {
			this.refresherrefresh()
		},
		methods: {
			to,
			scrolltolower() {
				this.getList()
			},
			goUser(userId){
				uni.navigateTo({
					url: `/pages/m-pages/m-user-info/index?userid=`+userId
				})
			},
			refresherrefresh() {
				this.refresherTriggered = true
				this.pageno = 1;
				this.userList = [];
				this.getList()
			},
			goDetail(item){
				uni.setStorageSync("agree-item",item)
				this.to("/pages/m-pages/m-agree-detail/index")
			},
			async getList(){
				// {pageno:1,gender:1}
				let res = await this.$c.post('/app/trip/list?pageno='+this.pageno)
				if(res.code == 1002){
					uni.navigateTo({
					  url: '/im/login/login'
					});
				}
				this.list = this.list.concat(res.data)
				console.log(this.list)
				this.pageno++;
				this.refresherTriggered = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.05);
		// background-color: #e3ecfb;
	}

	.custom-page {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 0;



		.item {
			box-sizing: border-box;
			padding: 20rpx;
			width: calc(100% - 40rpx);
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: rgba(246, 246, 246, 0.1);

			.avatar {
				width: 100%;
				height: 80rpx;

				.avatar-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30rpx;
					background-color: #999;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.item-title {
				width: 100%;
				margin: 10rpx auto;
			}

			.row {
				width: 100%;
				align-items: flex-end;

				.row-text {
					view {
						min-height: 44rpx;
					}
				}

				.row-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #999;
					image{
						width: 150rpx;
						height: 150rpx;
					}
				}
			}


		}
	}
</style>